<template>
  <div class="homeBox">
    <div class="homeImg"></div>

    <div class="home_content">
      <!-- 温度与景区 -->
      <div class="T_name">
        <img src="../assets/img/sun.png" alt="" />
        <p style="font-size: 16px">济源</p>
        <p>王屋山景区</p>
      </div>

      <!-- 搜索框 -->

      <div class="searchBox">
        <img src="../assets/img/download.svg" alt="" />
        <input
          type="text"
          placeholder="搜索"
          style="outline: none; border: none; margin-left: 6px"
        />
      </div>

      <!-- 图标+活动 -->
      <div class="iconList">
        <div class="iconItems">
          <img src="../assets/img/10001.png" alt="" />
          售卖专区
        </div>
        <div class="iconItems">
          <img src="../assets/img/10005.png" alt="" />
          景点讲解
        </div>
        <div class="iconItems">
          <img
            src="../assets/img/10004.png"
            alt=""
            @click="jump('/scenic_map')"
          />
          景区地图
        </div>
        <div class="iconItems">
          <img src="../assets/img/10003.png" alt="" />
          使用说明
        </div>
        <div class="iconItems">
          <img src="../assets/img/10002.png" alt="" />
          演出预告
        </div>
      </div>

      <!-- 公告 -->
      <div class="afficheBox">
        <img src="../assets/img/喇叭.png" alt="" />
        这里是公告
      </div>

      <!-- 活动 -->
      <div class="home_active">
        <img src="../assets/img/10008.png" alt="" />
        <img src="../assets/img/10007.png" alt="" />
        <img src="../assets/img/10006.png" alt="" />
      </div>

      <!-- 推荐景区 -->
      <div class="recom_scenic">
        <img src="../assets/img/10009.png" alt="" />
        推荐景区
        <div class="scenic_more">
          更多
          <img src="../assets/img/右箭头.png" alt="" />
        </div>
      </div>

      <!-- 景区瀑布流列表 -->
      <div class="scenic_list">
        <div class="goods_card" v-for="(item, index) in datas">
          <img :src="'https://jingqu.kuxia.top' + item.img" alt="" />
          <p class="card_title">{{ item.name }}</p>
          <div class="card_content">
            <span class="home_price">{{ item.score }}分</span>
            <p class="Past_price" style="margin-left: 10%">
              评价{{ item.number }}
            </p>
            <p class="sold">
              <img
                src="../../src/assets/img/love.png"
                alt=""
                style="width: 15px; height: 15px"
              />99+
            </p>
          </div>
        </div>
      </div>

      <!-- 推荐攻略 -->
      <div class="recom_scenic">
        <img src="../assets/img/10009.png" alt="" />
        推荐攻略
        <div class="scenic_more">
          更多
          <img src="../assets/img/右箭头.png" alt="" />
        </div>
      </div>

      <!-- 景区瀑布流列表 -->
      <div class="scenic_list">
        <div class="goods_card" v-for="(item, index) in data">
          <img :src="'https://jingqu.kuxia.top' + item.img" alt="" />
          <p class="card_title">{{ item.introduce }}</p>
          <div class="card_content">
            <span class="home_price"
              ><img :src="'https://jingqu.kuxia.top' + item.img" alt=""
            /></span>
            <p class="Past_price">
              {{ item.name }}
            </p>
            <p class="sold">
              <img
                src="../../src/assets/img/love.png"
                alt=""
                style="width: 15px; height: 15px"
              />99+
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar active-color="#ee0a24" v-model="active">
      <van-tabbar-item icon="home-o" @click="jump('/home')"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="search" @click="jump('/strategy')"
        >攻略</van-tabbar-item
      >
      <slot>
        <div class="home_issue">
          <div class="home_issue_img" @click="jump('/issue')">
            <img src="../assets/img/100016.png" alt="" />
          </div>
          <div style="height: 62%"></div>
          <p
            style="
              font-size: 12px;
              color: var(--van-tabbar-item-text-color);
              font-size: var(--van-tabbar-item-font-size);
              line-height: var(--van-tabbar-item-line-height);
              cursor: pointer;
            "
          >
            发布
          </p>
        </div>
      </slot>
      <van-tabbar-item icon="friends-o">排行榜</van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="jump('/mine')"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ScenicList, introList } from "@/api/home";
import { useRouter } from "vue-router";

const datas = ref([]);
const data = ref([]);
const router = useRouter();
// const actives = ref(0);

const jump = (url) => {
  router.push(url);
};

ScenicList({}).then((res) => {
  console.log(res.data); //成功回调
  datas.value = res.data;
});

introList({}).then((res) => {
  console.log(res.data); //成功回调
  data.value = res.data;
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.home_content {
  width: 100%;
  margin-top: 90px;
}
.homeImg {
  width: 100%;
  height: 260px;
  background-image: url("../src/assets/img/img17031118abd547358.webp");
  background-size: 100% 100%;
  position: absolute;
  top: 0%;
  z-index: -1;
}
.homeBox {
  width: 100%;
  height: auto;
}
.T_name {
  width: 40%;
  height: auto;
  color: white;
  font-size: 13px;
  font-weight: 700;
  margin-left: 3%;
}
.T_name img {
  width: 26px;
  height: 26px;
}
.searchBox {
  width: 92%;
  height: 30px;
  margin: auto;
  margin-top: 2%;
  padding-left: 3%;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background-color: white;
}

/* 下方图标列表 */
.iconList {
  display: flex;
  padding-top: 4%;
  background-color: white;
  width: 98%;
  margin: auto;
  margin-top: 2%;
  border-radius: 10px;
  font-size: 13px;
  padding-bottom: 4%;
}
.iconItems {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  > img {
    width: 54%;
  }
}

/* 公告 */
.afficheBox {
  width: 100%;
  height: 30px;
  background-color: #f8ebd9;
  color: #ffc300;
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-top: 2%;
  > img {
    width: 16px;
    height: 16px;
  }
}

/* 首页活动部分 */
.home_active {
  width: 100%;
  height: 166px;
  background-color: #f0f8ff;
  > img {
    width: 50%;
    float: left;
  }
}

/* 推荐景区 */
.recom_scenic {
  width: 100%;
  height: 30px;
  background-color: #e2eefd;
  color: #1d1d1d;
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-top: 2%;
  > img {
    width: 20px;
    height: 20px;
  }
}

.scenic_more {
  width: 14%;
  height: 90%;
  display: flex;
  padding-left: 1%;
  margin-left: 58%;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 50px;
  > img {
    width: 20px;
    height: 20px;
  }
}

/* 景区瀑布流列表 */
.scenic_list {
  padding-left: 6px;
  padding-right: 6px;
  column-count: 2;
  /* 定义列数，可以根据需要调整 */
  column-gap: 10px;
  /* 定义列与列之间的间隙 */
  /* background-color: aquamarine; */
}

.goods_card {
  break-inside: avoid-column;
  /* 防止内容断裂到新列 */
  margin-bottom: 10px;
  /* 定义项目之间的垂直间距 */
  background-color: #f0f0f0;
  /* 背景颜色，仅为了示例 */
  padding: 6px;
  /* 内边距 */
  border-radius: 5px;
}

.goods_card img {
  width: 100%;
}

.card_title {
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}
.card_content {
  width: 100%;
  height: 40px;
  font-size: 13px;
  color: #505050;
  display: flex;
}
.sold {
  display: flex;
  align-items: center;
  margin-left: 20%;
}

.home_price {
  display: flex;
  align-items: center;
  > img {
    width: 30px;
    height: 30px;
    border-radius: 25px;
  }
}

.Past_price {
  margin-left: 10%;
  font-size: 12px;
  display: flex;
  align-items: center;
}

/* 底部导航栏样式 */
van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.home_issue {
  width: 20%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.home_issue_img {
  position: absolute;
  width: 55px;
  height: 55px;
  top: -29px;
  background: #ffffff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  > img {
    width: 40px;
    height: 40px;
  }
}
</style>
